<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	
	<script src="js/jquery-1.8.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<title>Document</title>
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		.wrap{
			width:66px;
			height:24px;
			/*background-color:#4CD964;*/
			background-color:#fff;
			border-radius:13px;
			border:2px solid #ddd;
			position:fixed;
			top:50px;
			left:40%;
		}
		
		
		
		.wrap p{
			display:inline-block;
			position:absolute;
			left:15px;
			top:0px;
			z-index:-222;
			line-height: 24px;
			
		}
		.swicther{
			width:25px;
			height:25px;
			border-radius:13px;
			background-color:#fff;
			-webkit-box-shadow:1px 1px 2px 2px rgba(0,0,0,0.2);
			/*float:right;
			margin-right:-1px;
			margin-top:-1px;*/
			-webkit-transition:width 0.5s;
			z-index:999;
			margin-top:-1px;
		}
		.btogreen{
			-webkit-animation: togreen 1s;
			background-color:#4CD964;border:2px solid #4CD964;	
		}
		.btowhite{
			-webkit-animation: towhite 1s;	
			background-color:#fff;border:2px solid #ddd;
		}
		
		@-webkit-keyframes togreen
		{
		0% {background-color:#fff;border:2px solid #ddd;}
		20% {background-color:#fff;border:2px solid #ddd;}
		30% {background-color:#fff;border:2px solid #ddd;}
		40% {background-color:#fff;border:2px solid #ddd;}
		90% {background-color:#4CD964;border:2px solid #4CD964;}
		}
		
		@-webkit-keyframes towhite
		{
		0% {background-color:#4CD964;border:2px solid #4CD964;}
		20% {background-color:#4CD964;border:2px solid #4CD964;}
		30% {background-color:#4CD964;border:2px solid #4CD964;}
		40% {background-color:#4CD964;border:2px solid #4CD964;}
		90% {background-color:#fff;border:2px solid #ddd;}
		}
		
		@-webkit-keyframes to66
		{
		0%{width:26px;float:left}
		20%{width:26px;float:left}
		40%{width:66px;float:left}
		60%{width:66px;float:right}
		80%{width:26px;float:right}
		100%{width:26px;float:right}
		
		}
		@-webkit-keyframes to26
		{
		0%{width:26px;float:right}
		20%{width:26px;float:right}
		40%{width:66px;float:right}
		60%{width:66px;float:left}
		80%{width:26px;float:left}
		100%{width:26px;float:left}
		}
		.wto66{
			-webkit-animation: to66 0.5s;	
			float:right;
		}
		
		.wto26{
			-webkit-animation: to26 0.5s;	
			float:left;
		}
		
		
		
		
		
		
	</style>
</head>
<body>
	
	<div class="wrap">
		<div class="swicther"></div>
		<p></p>
	</div>
	
	<div class="wrap2">
		<div class="swicther2"></div>
		<p></p>
	</div>
	
	
</body>
<script>
	
	$(document).ready(function(){
		var status=0;
		$(".wrap p").text(status).css("color","#888").css("left","42px");
		
		
		
		
		var status;
		$(".wrap").toggle(function(){
			status=1;
			$(".swicther").removeClass("wto26").addClass("wto66").parent().removeClass("btowhite").addClass("btogreen").children("p").text(status).css("color","#fff").css("left","15px");
		},function(){
			status=0;
			$(".swicther").removeClass("wto66").addClass("wto26").parent().removeClass("btogreen").addClass("btowhite").children("p").text(status).css("color","#888").css("left","42px");
		});
			
			
			
			
			
			
			
			
			
			
		
		
		
	});
	
	
</script>
</html>